 <extend name="Common@Layout:bootstrap-home" />
<block name="title">阳光灿烂-使用教程</block>
<block name="style">
<css href="http://v3.bootcss.com/assets/css/docs.min.css" />
<style>
body{font-family:'微软雅黑';}
.lead img {width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>
</block>

<block name="main">
	<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
	  <div class="container">
	    <div class="navbar-header">
	      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a href="/" class="navbar-brand">阳光灿烂</a>
	    </div>
	    <nav id="bs-navbar" class="collapse navbar-collapse">
	      <ul class="nav navbar-nav">
	        <li class="active">
	          <a href="{:U('help/index/index')}">使用教程</a>
	        </li>
	      </ul>
	      
	    </nav>
	  </div>
	</header>
	
	<div class="bs-docs-header" id="content" tabindex="-1">
      <div class="container">
        <h1>使用教程</h1>
        <p>这边包含了平台的一些经常遇到的问题。</p>
      </div>
    </div>
	
	<div class="container bs-docs-container">

      <div class="row">
        <div class="col-md-9" role="main">
          	<div class="bs-docs-section" id="content_detail">

			</div>
        </div>
        
        <div class="col-md-3" role="complementary">
          <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top">
            <ul class="nav bs-docs-sidenav" id="docs_list">
				
            </ul>
            <a class="back-to-top" href="#top">返回顶部</a>
          </nav>
        </div>
        
      </div>
    </div>
	
	<footer class="bs-docs-footer" role="contentinfo" style="background:#cdbfe3;">
	  <div class="container">
	    <p style="color:#fff;"><img src="http://www.56class.cn/Public_s/images/56logo_2.png" > Copyright © 2012-2015 56class.cn All Rights Reserved.</p>
	  </div>
	</footer>
<script id="article" type="text/html">
<h1 id="overview" class="page-header">
	<a class="anchorjs-link " href="#overview" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
	<span>{{#title}}</span>
</h1>
<div class="lead">
	{{#content | decodehtmljson:content}}
</div>
</script>
</block>

<block name="script">
<script>
template.helper('decodehtmljson', function (str) {
	str = str.replace(new RegExp(/(\/\/&quot;)/g),'');
	str = str.replace(/&amp;/gi, '&');
	str = str.replace(/&nbsp;/gi, ' ');
	str = str.replace(/&quot;/gi, '"');
	str = str.replace(/&#39;/g, "'");
	str = str.replace(/&lt;/gi, '<');
	str = str.replace(/&gt;/gi, '>');
	//str = str.replace(/<br[^>]*>(?:(rn)|r|n)?/gi, '');
	return str;
});
$(function($){
	//加载菜单
	$.get('/Material/Apiopen/get_content_title_list_bycat/cid/16/p/1/pagesize/100/sortkey/listorder/sortkeyType/asc',function(ret){
		if(ret.status){
			var data = ret.data;
			var html = '';
			for(var i = 0 ; i < data.length ; i++){
				var tmp = data[i];
				html += '<li><a href="javascript:;" onclick="showContent('+tmp.id+')">'+tmp.title+'</a></li>';
			}
			$('#docs_list').html(html);
			showContent(data[0].id); //默认显示数据
		}else{
			alert(ret.info);
		}
	});
});
function showContent(id){
	var ii = layer.load(2);
	$.get('/Material/Apiopen/getcontent/id/'+id,function(ret){
		layer.close(ii);
		if(ret.status){
			var data = ret.data;
			var html = template('article', data);
			$('#content_detail').html(html);
		}else{
			alert(ret.info);
		}
	});
}
</script>
</block>